<template>
  <div>
    <el-card class="answer-card">
      <!-- header -->
      <div class="answer-card-header">
        <el-avatar
          style="width: 36px; height: 36px"
          :src="avatarFullPath"
        ></el-avatar>
        <div class="top-name">
          <div style="padding-right: 10px">{{ userName }}</div>
          <div style="padding-right: 10px; font-weight: bold">回复</div>
          <div style="">{{ answerName }}</div>
        </div>
        <div style="display: flex; align-items: center; margin-left: 210px">
          {{ formattedDate }}
        </div>
      </div>
      <!-- body -->
      <div class="answer-card-body">
        <div class="answer-card-body-text">
          {{ answerText }}
        </div>
      </div>
      <!-- bottom -->
      <div class="answer-card-bottom">
        <div style="width: 550px">
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @confirm="confirmDetele"
          >
            <i
              class="el-icon-delete delete-icon"
              v-if="showdelete"
              slot="reference"
            >
              删除
            </i>
          </el-popconfirm>
        </div>
        <div
          class="action-item"
          style="width: 110px; cursor: pointer"
          @click="operateZan"
        >
          <i :class="zanIcon"></i> 有用
          {{ formattedLikeCount }}
        </div>
        <div
          class="action-item"
          style="width: 70px; cursor: pointer"
          @click="reply"
        >
          <i class="el-icon-chat-dot-square"></i> 评论
        </div>
      </div>
    </el-card>
    <AnswerDrawer
      ref="answerDrawer"
      :artcleId="artcleId"
      :userId="userId"
      :userName="userName"
      @getReplyListByArticleId="getReplyListByArticleId"
    ></AnswerDrawer>
  </div>
</template>

<script>
import AnswerDrawer from "./AnswerDrawer.vue";

export default {
  created() {
    //根据获取用户名和头像以及回复名
    this.getUserInfoById();

    //获取回复的点赞数
    this.getLikeCountByReplyId();

    //
    this.getIsLikeByUserIdAndReplyId()
  },
  components: { AnswerDrawer },
  props: [
    "replyId",
    "artcleId",
    "userId",
    "answerId",
    "answerText",
    "createDate",
  ],
  data() {
    return {
      userName: "", //用户名，限制10个字
      avatar: "", //回复者头像
      avatarFullPath: "", //头像地址
      answerName: "", //被回复的用户名，限制10个字
      zanIcon: "el-icon-ali-weidianzan",
      likeCount: 0, //点赞数
    };
  },
  methods: {
    //点赞或者取消赞
    operateZan() {
      if (this.zanIcon == "el-icon-ali-weidianzan") {
        this.zanIcon = "el-icon-ali-yidianzan";
        this.likeCount++;
        this.addOrUpdateReplyLikeRecordByUserIdAndReplyId();
      } else {
        this.zanIcon = "el-icon-ali-weidianzan";
        this.likeCount--;
        this.addOrUpdateReplyLikeRecordByUserIdAndReplyId();
      }
    },
    //回复消息
    reply() {
      this.$refs.answerDrawer.$data.drawer = true;
    },
    //根据获取用户名和头像
    getUserInfoById() {
      //1.获取回复者的名称和头像
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: this.userId,
        },
        success: (data) => {
          if (data.code == 200) {
            this.userName = data.user.username;
            this.avatar = data.user.avatar;
            this.avatarFullPath = `${this.$store.state.ipAddr}/${this.avatar}`;
          }
        },
        error: (error) => {},
      });
      //2.获取被回复者的名称
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: this.answerId,
        },
        success: (data) => {
          if (data.code == 200) {
            this.answerName = data.user.username;
          }
        },
        error: (error) => {},
      });
    },
    //触发getReplyListByArticleId，更新回复列表
    getReplyListByArticleId() {
      this.$emit("getReplyListByArticleId");
    },
    //确认删除
    confirmDetele() {
      this.deleteReplyById();
    },
    //根据回复id删除回复
    deleteReplyById() {
      this.$request.postHttp({
        url: "/reply/deleteReplyById",
        params: {
          replyId: this.replyId,
          articleId: this.artcleId,
        },
        success: (data) => {
          console.log(data);
          if (data.isDelete) {
            // 更新回复列表
            this.getReplyListByArticleId();
            this.$message({
              message: "已删除",
              type: "success",
            });
          }
        },
        error: (error) => {},
      });
    },
    //获取回复的点赞数
    getLikeCountByReplyId() {
      this.$request.getHttp({
        url: "/replylikerecord/getLikeCountByReplyId",
        params: {
          replyId: this.replyId,
        },
        success: (data) => {
          this.likeCount = data.likeCount;
        },
        error: (error) => {},
      });
    },
    //根据当前用户的id和回复的id点赞或者取消点赞
    addOrUpdateReplyLikeRecordByUserIdAndReplyId() {
      this.$request.postHttp({
        url: "/replylikerecord/addOrUpdateReplyLikeRecordByUserIdAndReplyId",
        data: {
          userid: localStorage.getItem("userId"),
          replyid: this.replyId,
        },
        success: (data) => {
          console.log(data);
        },
        error: (error) => {},
      });
    },
    //获取当前用户是否点赞该条回复
    getIsLikeByUserIdAndReplyId() {
      this.$request.postHttp({
        url: "/replylikerecord/getIsLikeByUserIdAndReplyId",
        data: {
          replyid: this.replyId,
          userid: localStorage.getItem("userId"),
        },
        success: (data) => {
          console.log(data);
          if (data.isLike) {
            this.zanIcon = "el-icon-ali-yidianzan";
          }
        },
        error: (error) => {},
      });
    },
  },
  computed: {
    //显示delete按钮
    showdelete() {
      //当前用户iD和文章的用户id相等
      return localStorage.getItem("userId") == this.userId;
    },
    formattedLikeCount() {
      const likeCount = this.likeCount;
      if (likeCount < 10000) {
        // 当数字小于5位数时，返回当前数字，并用空格填充到4位
        return likeCount;
      } else {
        // 当数字大于5位数时，转换成w表示法，并用空格填充到4位
        const formattedLikeCount = (likeCount / 10000).toFixed(1);
        return `${formattedLikeCount}w`.padStart(4, " ");
      }
    },
    formattedDate() {
      const today = new Date(this.createDate);
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
      const day = String(today.getDate()).padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
  },
};
</script>

<style scoped>
.answer-card {
  width: 780px;
  margin-bottom: 20px;
}
.answer-card-header {
  display: flex;
  align-items: center;
  margin-top: 0px;
}

.top-name {
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 370px;
}

.answer-card-body {
  margin-top: 10px;
  margin-left: 35px;
  width: 680px;
  max-height: 80px;
}

.answer-card-bottom {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.delete-icon {
  padding-left: 35px;
  cursor: pointer;
}
.action-item:hover {
  background-color: #f0f0f0; /* Change the background color on hover */
}
</style>